<template>
  <div v-if="film" class="film spage" >
      <myhead :back="true" :title="film.name"></myhead>
      <div class="film-box">
          <div class="img-top">
              <van-image :src="film.poster" class="fimg"></van-image>
          </div>
          <div class="film-info">
              <div class="titles">
                   <h2 class="title">
                      <span class="name">
                        {{film.name}}
                      </span>
                      <span class="item">{{film.item.name}}</span>
                  </h2>
                  <div class="grade">
                    {{film.grade}} 分
                  </div>
              </div>
              <p  class="pt info-col">
                    <span class="label">
                      {{film.category }} 
                    </span>
                </p>
              <p  class="pt info-col">
                    <span class="label">
                      {{film.premiereAt * 1000 | timeFormat('YYYY-MM-DD') }} 上映 
                    </span>
                </p>
               <p  class="pt info-col">
                    <span class="label">
                      {{film.nation}} | {{film.runtime}} 分钟
                    </span>
                </p>

                <div class="film-desc">
                    <div ref="box" v-if="flag">
                        {{film.synopsis}}
                    </div>
                    <div v-else class="mybox" :style="{height:toggle?'1rem':this.height+'px'}" >
                        {{film.synopsis}}
                    </div>
                    <p class="arrow" @click="toggle=!toggle">
                      <van-icon :name="toggle?'arrow-down':'arrow-up'"  />
                    </p>
                </div>
          </div>
      </div>
      <div class="actors">
          <p class="title">
              演职人员
          </p>
          <div class="actor-box">
              <ul class="actor-list">
                  <li class="actor-item" v-for="(l,i) in film.actors" :key="i">
                      <img :src="l.avatarAddress" alt="">
                      <p class="name">
                        {{l.name}}
                      </p>
                      <p class="role">
                        {{l.role}}
                      </p>
                  </li>
              </ul>
          </div>
      </div>
      <div class="photos">
          <div class="top">
            <p class="title">
                剧照
            </p>
            <p class="more" @click="show=true">
              全部({{film.photos.length}})
            </p>
          </div>
          <div class="photo-box">
              <ul class="photo-list">
                  <li class="photo-item" v-for="(l,i) in film.photos" :key="i">
                      <img @click="previewImg(i)" :src="l" alt="">
                  </li>
              </ul>
          </div>
      </div>
      <van-button class="buysome" @click="gotobuyticket">选座购票</van-button>

      <van-popup v-model="show" closeable position="bottom" :style="{ height: '100%' }">
          <div class="pop">
              <div class="pop-top">
                  <span>剧照({{film.photos.length}})</span>
              </div>
              <div class="pop-list">
                  <img :src="l"  class="pop-img" v-for="(l,i) in film.photos" :key="i" alt="">
              </div>
          </div>
      </van-popup>
  </div>
</template>

<script>
import {ImagePreview} from "vant"
export default {
  data(){
    return {
      film:null,
      height:'1rem',
      flag:true,
      show:false,
      toggle:true  // 1rem  false 295 
    }
  },
  methods:{
    gotobuyticket(){
      this.$router.push({name:'buy',params:{
        filmId:this.film.filmId 
      }})
    },
    previewImg(index){
      ImagePreview({
        images: this.film.photos,
        startPosition: index,
      });
    }
  },
  mounted(){
    this.$ajax.getMaiZuo({
        filmId:this.$route.params.filmId,
    },{
      'X-Host': 'mall.film-ticket.film.info'
    })
    .then(res=>{
      console.log(res)
      this.film = res.data.film;
      this.$nextTick(()=>{
        this.height = this.$refs.box.clientHeight;
        console.log(this.height);
        this.flag = false;
      })
     
      
    })
  }
}
</script>

<style lang="scss" scoped>
.pop{
  &-top{
    padding-top:30px;
    text-align: center;
    font-size:20px;
    color:#000;
    padding-bottom:10px;
  }
  .pop-list{
    display: flex;
    flex-wrap: wrap;
    .pop-img{
      width:124px;
      height:124px;
    }
  }

}
.info-col{
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    font-size: 13px;
    margin-top: 7px;
    color: #797d82;
    .label{
      font-size: 13px;
      // margin-top: 4px;
      color: #797d82;
    }
}
.film{
  background: #fafafa;
  position: relative;
  
  .photos{
      margin-top:10px;
      width:100%;
      background: #fff;
      padding-bottom: 59px !important;
      .top{
          width: 100%;
          padding: 15px;
          display: flex;
          justify-content: space-between;
          font-size:16px;
          color:#666;
      }
      .photo-box{
        width: 100%;
        overflow: auto;
        .photo-list{
          display: flex;
          padding:0 5px;
          .photo-item{
            width:160px;
            height:100px;
            padding:0 5px;
            img{
              width:150px;
              height:100px;
            }
          }
        }
      }
    }
  .actors{
    margin-top:10px;
    width:100%;
    background: #fff;
    .title{
      width: 100%;
      padding: 15px;
      font-size:16px;
      color:#666;
    }
    .actor-box{
      width: 100%;
      overflow: auto;
      .actor-list{
        display: flex;
        .actor-item{
          width:85px;
          height:134px;
          margin-right:15px;
          img{
            width:85px;
            height:85px;
          }
          p{
            text-align: center;
            margin-top:4px;
            font-size: 12px;
            color: #191a1b;
          }
          &:last-child{
               margin-right:0;
          }
        }
      }
    }
  }
  .buysome{
    position: fixed;
    bottom: 0;
    left: 0;
    height: 49px;
    width: 100%;
    text-align: center;
    background-color: #ff5f16;
    color: #fff;
    font-size: 16px;
    line-height: 49px;
  }
  &-box{
    .img-top{
      height:210px;
       width:100%;
      overflow: hidden;
      .fimg{
        width:100%;
        height:526px;
        top: 50%;
        transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
      }
    }
    .film-info{
      width:100%;
      padding: 15px;
      padding-top: 12px;
      background-color: #fff;
      .titles{
        display: flex;
         .title{
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 100%;
          .name{
                max-width: calc(100% - 25px);
                color: #191a1b;
                font-size: 16px;
                height: 22px;
                line-height: 22px;
                margin-right: 5px;
                overflow: hidden;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                white-space: nowrap;
          }
          .item{
              font-size: 13px;
              color: #fff;
              background-color: #d2d6dc;
              height: 14px;
              line-height: 14px;
              padding: 0 2px;
              border-radius: 2px;
          }
        }
        .grade{
            width:100px;
            text-align: right;
            color: #ffb232;
            font-size: 14px;
        }
      }

      .film-desc{
        margin-top:15px;  
        font-size: 13px;
        color: #797d82;
        line-height:20px;
        .mybox{
          overflow: hidden;
          transition: all 0.3s;
        }
        .arrow{
          text-align: center;
        }
      }
    }
  }
}
</style>
